<template>
  <div class="errorpage" ref="bgstar" id="bgstar">
    <img :src="Img" class="myimg" alt="">
    <Dao :gotowhere="gotowhere" :path="'/login'" :width="90" :speed="5" :interval="250" />
    <span v-for="(item, index) in spanList" :key="index" class="spandot" :style="item">
    </span>
  </div>
</template>

<script lang="ts" setup >
import Img from '@/assets/images/503.png'
import { onMounted, onUnmounted, ref, reactive, type Ref } from 'vue'
import { useRouter } from 'vue-router';
import { spanTypes } from '../../utils/types';
import { useHookOne } from '../../hooks/MyHookOne'
import Dao from '../../components/Dao.vue'
const { bgstar, spanList, gotowhere } = useHookOne()


</script>


<style lang="scss" scoped >
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  padding: 0 !important;
  overflow: hidden;

  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
  }

  .dao {
    position: absolute;
    top: 20px;
    right: 20px;

    ::v-deep .el-progress__text {
      color: #fff !important;
      font-size: 16px;
    }
  }

  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }

  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }

  @keyframes flash {
    from {
      opacity: 0;
    }

    to {
      opacity: 0.5;
    }
  }
}
</style>